<template>
  <a-spin style="display: block" :loading="loading">
    <a-tabs v-model:activeKey="messageType" type="rounded" destroy-on-hide>
      <a-tab-pane v-for="item in tabList" :key="item.key">
        <template #title>
          <span> {{ item.title }}{{ formatUnreadLength(item.key) }} </span>
        </template>
        <a-result v-if="!renderList.length" status="404">
          <template #subtitle> {{ '暂无内容' }}</template>
        </a-result>
        <List
            :render-list="renderList"
            :unread-count="unreadCount"
            @item-click="handleItemClick"
        />
      </a-tab-pane>
      <template #extra>
        <a-button type="text" @click="emptyList">
          {{ '清空' }}
        </a-button>
      </template>
    </a-tabs>
  </a-spin>
</template>

<script lang="ts" setup>
import {computed, reactive, ref, toRefs} from 'vue';
import {MessageListType, MessageRecord, queryMessageList, setMessageStatus,} from '@/api/message';
import useLoading from '@/hooks/loading';
import List from './list.vue';

interface TabItem {
  key: string;
  title: string;
  avatar?: string;
}

const {loading, setLoading} = useLoading(true);
const messageType = ref('message');
const messageData = reactive<{
  renderList: MessageRecord[];
  messageList: MessageRecord[];
}>({
  renderList: [],
  messageList: [],
});
toRefs(messageData);
const tabList: TabItem[] = [
  {
    key: 'message',
    title: '消息',
  },
  {
    key: 'notice',
    title: '通知',
  },
  {
    key: 'todo',
    title: '待办',
  },
];

async function fetchSourceData() {
  setLoading(true);
  try {
    const {data} = await queryMessageList();
    messageData.messageList = data;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
}

async function readMessage(data: MessageListType) {
  const ids = data.map((item) => item.id);
  await setMessageStatus({ids});
  fetchSourceData();
}

const renderList = computed(() => {
  return messageData.messageList.filter(
      (item) => messageType.value === item.type
  );
});
const unreadCount = computed(() => {
  return renderList.value.filter((item) => !item.status).length;
});
const getUnreadList = (type: string) => {
  const list = messageData.messageList.filter(
      (item) => item.type === type && !item.status
  );
  return list;
};
const formatUnreadLength = (type: string) => {
  const list = getUnreadList(type);
  return list.length ? `(${list.length})` : ``;
};
const handleItemClick = (items: MessageListType) => {
  if (renderList.value.length) readMessage([...items]);
};
const emptyList = () => {
  messageData.messageList = [];
};
fetchSourceData();
</script>

<style scoped lang="less">
:deep(.arco-popover-popup-content) {
  padding: 0;
}

:deep(.arco-list-item-meta) {
  align-items: flex-start;
}

:deep(.arco-tabs-nav) {
  padding: 14px 0 12px 16px;
  border-bottom: 1px solid var(--color-neutral-3);
}

:deep(.arco-tabs-content) {
  padding-top: 0;

  .arco-result-subtitle {
    color: rgb(var(--gray-6));
  }
}
</style>
